<template>
  <div style="padding: 20px;">
      <el-form :model="row" :label-width="formLabelWidth">
        <el-form-item label="分类名称">
          <el-input v-model="row.name" placeholder="请输入名称"></el-input>
        </el-form-item>

        <el-form-item label="是否展示">
          <el-switch v-model="iswitch"></el-switch>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="row.sort" placeholder="0-999"></el-input>
        </el-form-item>

        <el-form-item label="封面">
          

          <div v-if="row.icon.length > 0"
            style="position: relative;width: 130px;height: 130px;">
                <el-image :src="row.icon" fit="fill" :lazy="true" 
                style="width: 130px;height: 130px;"
                ></el-image>
                <i class="el-icon-error" style="font-size: 24px;color: red;position: absolute;
                top: 0;right: 0;cursor: pointer;
                " @click="row.icon = ''"></i>
            </div>

            <el-upload
              v-if="row.icon.length == 0"
              action="http://47.103.2.155:8801/api/File/upload"
              list-type="picture-card"
              name="file"
              :on-success="uploadSuccess"
              :limit="1"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>

        <el-form-item label="类别介绍">
          <el-input type="textarea" v-model="row.type"></el-input>
        </el-form-item>

      </el-form>

      <div style="display: flex;justify-content: center;">
        <el-button type="primary" @click="addHandle">完 成</el-button>
      </div>
  </div>
</template>

<script>
  import Api from "./api"
  export default {
    props:['row'],
    data() {
      return {
        formLabelWidth: '80px',
        iswitch:false,
      }
    },
    mounted(){
      this.iswitch = this.row.show == 1;  
    },
    methods: {
      uploadSuccess(obj,res,file) {
        if (obj.code == 200) {
          this.$message.success({dangerouslyUseHTMLString: true,
            message: obj.msg})
          let {fileUrl} = obj.data;
          this.row.icon = fileUrl;
        } else {
          this.$message.error('操作失败')
        }
      },
      async addHandle(){
        this.row.show = this.iswitch ? 1:0;
        let {data} = await Api.YzKindUpdate(this.row);
        let {code,msg} = data;
        if (code == 200) {
          this.$message({
            message: msg,
            type: 'success'
          });
          this.$emit('onClose',{});
        } else {
          this.$message.error(msg);
        }
      }
    }
  }
</script>

<style>
</style>
